<template>
    <div class="login-display">
        <div class="login">
            <al-login
                :background-image="backgroundImage"
                :login-title="title"
                :positional-information="positionalInformation"
                :fetch-captcha="fetchCaptcha"
                :password-login="login"
                :is-logo="true"
                :is-login-title-img="isLoginTitleImg"
                :login-image-src="loginImageSrc"
                @getUserInfo="getUserInfo"
            >
                <template #headerLogo>
                    <img :src="logoImg" class="page-logo" />
                </template>
                <template #headerTitle>
                    {{ headerTitle }}
                </template>
                <template #footer>
                    <span>{{ footerSetting }}</span>
                </template>
            </al-login>
        </div>
    </div>
</template>
<script lang="ts">
    import { defineComponent, onMounted, ref } from 'vue'
    import { useI18n } from 'vue-i18n'
    import allinLogo from '@/assets/images/logo.png'
    import imgUrl from '@/assets/images/login.png'
    import { useUserStore } from '@/store/modules/user'
    import { fetchCaptcha, fetchSystemInfo } from '@/apis/sys/user'
    import LoginPageConfig from '@/views/system/login/LoginPageConfig.json'
    import { ROUTER_NAME } from '@/constant'
    import { useRouter } from 'vue-router'
    import { localSave } from '@/utils/common'
    export default defineComponent({
        name: 'Login',
        setup() {
            const { t } = useI18n()
            const backgroundImage = ref(imgUrl)
            const title = ref('')
            const logoImg = ref(allinLogo)
            const userStore = useUserStore()
            const router = useRouter()
            const positionalInformation = ref({
                left: '65%',
                top: '24%',
                width: '',
                height: '',
                backgroundColor: ''
            })
            const headerTitle = ref('')
            const footerSetting = ref('')
            const loginImageSrc = ref('')
            const isLoginTitleImg = ref(false)
            // 根据配置项显示登录页信息
            function setLoginConfig(config: any) {
                const {
                    titleDisplay,
                    titleSetting,
                    titleSettingTitle,
                    loginFormLeft,
                    loginFormTop,
                    loginFormWidth,
                    loginFormHeight,
                    loginFormBackColor,
                    footerSettings,
                    headerImage,
                    titleSettingType
                } = config
                logoImg.value = allinLogo // 左上角logo
                backgroundImage.value = imgUrl // 背景
                headerTitle.value = titleDisplay ? titleSetting : '' // 左上角标题
                isLoginTitleImg.value = titleSettingType === 'picture' // 是否开启登录框logo
                title.value = titleSettingTitle // 登录框标题
                loginImageSrc.value = headerImage // 登录框logo
                footerSetting.value = footerSettings // 页脚文案
                positionalInformation.value = {
                    // 登录框样式
                    left: `${loginFormLeft}%`,
                    top: `${loginFormTop}%`,
                    width: `${loginFormWidth}px`,
                    height: `${loginFormHeight}px`,
                    backgroundColor: loginFormBackColor || '#ffffff'
                }
            }
            onMounted(() => {
                setLoginConfig(LoginPageConfig)

                let host = window.location.hostname
                if (import.meta.env.DEV) {
                    // 开发环境使用配置的域名获取应用信息
                    host = import.meta.env.VITE_DEV_PRODUCT_DOMAIN ?? host
                } else {
                    host = host + (window.location.port === '' ? '' : ':' + window.location.port)
                }
                host = host + import.meta.env.VITE_PUBLIC_PATH + '/'
                fetchSystemInfo(host)
                    .then(resp => resp.data)
                    .then(resp => {
                        const { id, name, showName, url, extSetting, tenantId } = resp
                        userStore.tenantId = tenantId
                        userStore.productId = id
                        // userStore.appid = import.meta.env.VITE_APP_ID || 'app_preview'
                        // 模拟使用的是Product Container进行的登录
                        userStore.appid = 'product-container'
                        // 兼容DG等项目在localStorage中读取产品信息的场景
                        localSave('al__ALL_PRODUCT_INFO', { id, name, showName, url, extSetting, tenantId })
                        localSave('al__PRODUCT_CONTAINER_ID', id)
                        // localSave('al__APPID', import.meta.env.VITE_APP_ID || 'app_preview')
                        localSave('al__APPID', 'product-container')
                    })
            })
            // 清除DPA导航模式下选中的信息
            userStore.setCurrentDepartment(null)
            const login = params => {
                return userStore.login({
                    password: params.params.password,
                    username: params.params.username,
                    key: params.params.key,
                    captcha: params.params.captcha
                })
            }

            const getUserInfo = () => {
                router.push({ name: ROUTER_NAME.PAGE_ROOT })
            }

            return {
                t,
                positionalInformation,
                footerSetting,
                backgroundImage,
                title,
                isLoginTitleImg,
                loginImageSrc,
                logoImg,
                headerTitle,
                fetchCaptcha,
                login,
                getUserInfo
            }
        }
    })
</script>
<style lang="less" scoped>
    .login-display {
        flex: 1;
        position: relative;
        overflow: hidden;
        height: 100%;
        width: 100%;
    }
    .login {
        width: 100%;
        height: 100%;

        :deep(.al-login) {
            background-size: 100% 100%; //高度100%，宽度自适应
            background-position: inherit;
            background-color: #fff;
            width: 100%;
            height: 100%;

            .al-login-header {
                img {
                    display: inline-block;
                }
            }
            .@{ant-prefix}-input-affix-wrapper {
                //padding: 0;
                padding: 0 0 0 11px;
            }

            .al-login-container {
                background-color: #fff;
                border: 1px solid rgba(67, 77, 93);
                border-radius: 5px;
                z-index: 10;
                color: #fff;
                overflow: hidden;
                transform: none;

                .@{ant-prefix}-input {
                    background-color: rgba(0, 0, 0, 0);
                    padding-left: 0;

                    &::placeholder {
                        color: rgb(101, 109, 123);
                    }
                }

                .@{ant-prefix}-input-suffix{
                    img{
                        height: 40px;
                    }
                }
            }

            .al-copyright {
                text-align: center;
            }
        }
    }

    .page-logo {
        width: 180px;
        margin: 4px 52px;
    }
</style>
